<template>
    <ele-modal
      width="680px"
      :visible="visible"
      :append-to-body="true"
      :close-on-click-modal="true"
      custom-class="ele-dialog-form"
      title="新增关注"
      @update:visible="updateVisible"
    >
      <div style="padding-bottom: 22px">
      <ele-table-select
        @select="selectVideo"
        @clear="selectVideo"
        ref="select"
        v-model="accountInfo"
        :clearable="true"
        placeholder="请选择账号"
        value-key="id"
        label-key="nickname"
        :table-config="tableConfig"
        :popper-width="500"
      >
        <!--头部按钮-->
        <template v-slot:toolbar>
          <div class="flex-align-center">
            <!--<div>账号类型</div>
           <el-radio-group v-model="types" @input="reload">
              <el-radio :label="1">D音h5</el-radio>
              <el-radio :label="2" v-if="indexData &&indexData.toCookieReleased==1">D音cookie</el-radio>
              <el-radio :label="3" v-if="indexData &&indexData.toBeReleased==1">代发布到D音</el-radio>
            </el-radio-group>-->
            <div class="flex-align-center border">
              <div v-for="(i,j) in typeList" :key="j" @click="typeClick(i.id)">
                <div :class="types == typeList[j].id ? 'select-type' : 'no-select-type'" class="flex default">{{i.name}}</div>
              </div>
            </div>
          </div>
        </template>
        <!-- 角色列 -->
        <template v-slot:roles="{ row }">
          <el-tag
            v-for="item in row.roles"
            :key="item.roleId"
            size="mini"
            type="primary"
            :disable-transitions="true"
          >
            {{ item.roleName }}
          </el-tag>
        </template>
        <!-- 头像列 -->
        <template v-slot:head="{ row }">
          <div style="line-height: 1">
            <el-avatar v-if="row.head" :src="row.head" :size="35" />
          </div>
        </template>
      </ele-table-select>
      </div>
      <template v-slot:footer>
        <el-button @click="updateVisible(false)">取消</el-button>
        <el-button type="primary" :loading="loading" @click="save">
          保存
        </el-button>
      </template>
    </ele-modal>
</template>

<script>
    import {accountQuery} from "@/api/matrixManage/accountList";
    export default {
      name: "followAccount",
      data() {
        return {
          loading:false,
          selInfo:{},
          types:1,
          //1.抖音h5 2.抖音无痕 3.抖音代员工 4.快手
          typeList:[
            {name:'D音h5',id:1},
          ],
          indexData: localStorage.getItem('indexData') ? JSON.parse(localStorage.getItem('indexData')) : {},
          accountInfo:'',
          // 回显值
          initValue: undefined,
          // 表格配置
          tableConfig: {
            datasource: ({page, limit, where, order}) => {
              return accountQuery({
                ...where, ...order, page, limit,
                username: this.$store.state.user.info.username,
                type:1,
                types:this.types
              });
            },
            columns: [
              {
                columnKey: 'index',
                type: 'index',
                width: 45,
                align: 'center',
                showOverflowTooltip: true,
                fixed: 'left'
              },
              {
                prop: 'head',
                label: '头像',
                sortable: 'custom',
                showOverflowTooltip: true,
                minWidth: 90,
                align: 'center',
                slot: 'head'
              },
              {
                prop: 'nickname',
                label: '用户昵称',
                align: 'center',
                sortable: 'custom',
                showOverflowTooltip: true,
                minWidth: 110
              },
              {
                prop: 'groupName',
                label: '账号分组',
                align: 'center',
                sortable: 'custom',
                showOverflowTooltip: true,
                minWidth: 110
              }
            ],
            toolbar: true,
            pageSize: 5,
            pageSizes: [5, 10, 15, 20],
            size: 'small'
          },
          visible:false
        }
      },
      methods:{
        show(){
          this.visible=true
        },
        /* 更新visible */
        updateVisible(value) {
          this.visible=value
          this.loading=false
        },
        // 1.抖音h5 2.抖音无痕 3.抖音代员工 4.快手  分组动态新增
        initType(){
          console.log("indexData=======",this.indexData)
          //（1.开启 2.发布）
          if(this.indexData && this.indexData.toCookieReleased==1){
            let item={name:'D音cookie',id:2}
            this.typeList.splice(1, 0, item);
            // this.checkList.push('D音H5任务发布')
            console.log('D音cookie发布this.form333========')
          }
          if(this.indexData && this.indexData.toBeReleased==1){
            let item={name:'代发布到D音',id:3}
            this.typeList.splice(1, 0, item);
            // this.checkList.push('代员工发布到D音')
            console.log("代员工发布到D音333")
          }
        },
        // d音，切换类型
        typeClick(index){
          this.types=index
          this.reload()
        },
        // 选择 视频素材
        selectVideo(e){
          console.log('选择账号====',e)
          this.selInfo=e
          if(e){
              this.accountInfo=e.id
          }
          // clear事件进入
          else{
            this.accountInfo=''
          }
        },
        save(){
          this.loading=true
          this.$emit('getData', this.selInfo) // 修改
          this.updateVisible(false)
        },
        // 刷新下拉表格
        reload(where){
          this.$refs.select.reload({
            where: where,
            page: 1
          });
        },
        clear(){
          // 清空数据并‘刷新列表’
          // this.reload()
        }
      }
    }
</script>

<style scoped lang="less">

  .border{
    border-radius: 5px;
    overflow: hidden;
    .no-select-type,.select-type{
      display: flex;
      align-items: center;
      justify-content: center;
      min-width: 60px;
      padding: 0 5px;
      height: 29px;
    }
    .select-type{
      background: #1E6CEB;
      color: #FFFFFF;
    }
    .no-select-type{
      border: 1px solid #F5F5F5;
      color: #ABAFB5;
    }
  }
</style>
